/* 选中页面内的<div class="box">元素 */

div.box {
  /* 宽度设置为902像素 */
  width: 902px;
  /* 高度设置为384像素 */
  height: 384px;
  /* 设置上下外边距为<body>元素的5%，左右外边距自动调整 */
  margin: 5% auto;
  /* 设备背景颜色（临时） */
  background-color: #ccc;
}

/* 选中页面内的<div class="box">的所有<div>子元素 */
div.box > div {
  /* 同一行显示 */
  float: left;
  /* 设置为相对定位，方便他们的子元素基于父元素进行绝对定位 */
  position: relative;
}

/* 选中页面内的<div class="control-left">元素 */

div.control-left {
  /* 宽度设置为div.box元素宽度的15%像素 */
  width: 15%;
  /* 高度设置为div.box元素高度的100%像素 */
  height: 100%;
  /* 背景颜色设置为#00BAE1 */
  background-color: #00bae1;
  /* 设置顶部左侧边框为90像素的圆角 */
  border-top-left-radius: 90px;
  /* 设置底部左侧边框为90像素的圆角 */
  border-bottom-left-radius: 90px;
  /* 设置阴影效果 */
  box-shadow: inset 5px 5px 10px #00bae1,
    inset 7px 15px 5px -5px rgba(255, 255, 255, 0.6),
    inset 10px -35px 8px -25px rgba(0, 0, 0, 0.4),
    inset 12px 0px 10px -5px rgba(0, 0, 0, 0.4);
}

/* 选中页面内的<div class="screen">元素 */
div.screen {
  /* 宽度设置为div.box元素宽度的70%像素 */
  width: 70%;
  /* 高度设置为div.box元素高度的100像素 */
  height: 100%;
  /* 背景设置为从上到下渐变的颜色（#2E3235，#414344） */
  background: linear-gradient(to bottom, #2e3235, #414344);
  /* 设置阴影效果 */
  box-shadow: inset 0 15px 20px -10px rgba(255, 255, 255, 0.6),
    inset 0 -21px 20px -10px rgba(0, 0, 0, 0.8);
}

/* 选中页面内的<div class="control-right">元素 */

div.control-right {
  /* 宽度设置为div.box元素高度的15%元素 */
  width: 15%;
  /* 高度设置为div.box元素高度的100%像素 */
  height: 100%;
  /* 背景颜色设置为#F22E38 */
  background-color: #f22e38;
  /* 设置顶部右侧边框为90像素的圆角 */
  border-top-right-radius: 90px;
  /* 设置底部右侧边框为90像素的圆角 */
  border-bottom-right-radius: 90px;
  /* 设置阴影效果 */
  box-shadow: inset -5px 5px 10px #f22e38,
    inset -7px 15px 5px -5px rgba(255, 255, 255, 0.4),
    inset -10px -35px 8px -25px rgba(0, 0, 0, 0.3),
    inset -14px 0px 10px -5px rgba(0, 0, 0, 0.3);
}

/* 选中页面内的<div class="minus-btn">元素 */

div.minus-btn {
  /* 宽度设置为div.control-left元素宽度的17%像素 */
  width: 17%;
  /* 高度设置为div.control-left元素高度的1.8%像素 */
  height: 1.8%;
  /* 背景设置为#3a3a3a颜色值 */
  background-color: #3a3a3a;
  /* 设置阴影效果 */
  box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.4), 0 0 0 1px #2b2b2b,
    1px 2px 10px rgba(0, 0, 0, 0.5);
  /* 设置四条边框的圆角为2像素 */
  border-radius: 2px;
  /* 设置为绝对定位 */
  position: absolute;
  /* 设置为距离div.control-left元素的上边界有10%像素的距离 */
  top: 10%;
  /* 设置为距离div.control-left元素的右边界右8%像素的距离 */
  right: 8%;
}

/* 选中页面内的<div class="analog-left">元素 */
div.analog-left {
  /* 宽度设置为div.control-left元素宽度的45%像素 */
  width: 45%;
  /* 高度设置为div.control-left元素高度的16%像素 */
  height: 16%;
  /* 背景颜色设置为从上往下的渐变色（#5e6367，#141516） */
  background: linear-gradient(to bottom, #5e6367, #141516);
  /* 设置圆角效果 */
  border-radius: 50%;
  /* 设置为绝对定位 */
  position: absolute;
  /* 设置为距离div.control-left元素的上边界有19%像素的距离 */
  top: 19%;
  /* 设置为距离div.control-left元素的左边界有29%像素的距离 */
  left: 29%;
  /* 设置阴影效果 */
  box-shadow: 0 -0.5px 1px 2px rgba(20, 21, 22, 0.9), 0 -2px 2px 2px #00bae1,
    0 1px 1px 1px #141516, 0 8px 35px 1px rgba(0, 0, 0, 0.5);
}

/* 选中页面内的<div class="analog-left">元素，然后内部新增before元素 */
div.analog-left::before {
  /* 设置为绝对定位 */
  position: absolute;
  /* 设置元素内容 */
  content: "";
  /* 宽度设置为div.analog-left元素宽度的85%像素 */
  width: 85%;
  /* 高度设置为div.analog-left元素高度的85%像素 */
  height: 85%;
  /* 背景颜色设置为从下往上的渐变色（#525659 40%, #424040 100%） */
  background: linear-gradient(to top, #525659 40%, #424040 100%);
  /* 设置为圆角效果 */
  border-radius: 50%;
  /* 设置为距离div.analog-left元素的上边界有50%像素的距离 */
  top: 50%;
  /* 设置为距离div.analog-left元素的左边界有50%像素的距离 */
  left: 50%;
  /* X轴向左移动div.analog-left元素宽度的50%像素，Y轴向上移动div.analog-left元素高度的50%像素 */
  transform: translate(-50%, -51%);
}

/* 选中页面内的<div class="analog-left">元素，然后内部新增after元素 */
div.analog-left::after {
  /* 设置为绝对定位 */
  position: absolute;
  /* 设置元素内容 */
  content: "";
  /* 宽度设置为div.analog-left元素宽度的76%像素 */
  width: 76%;
  /* 高度设置为div.analog-left元素高度的76%像素 */
  height: 76%;
  /* 背景颜色设置为从顶部圆心向外的渐变色（#788084, #212427） */
  background: radial-gradient(circle at top, #788084, #212427);
  /* 设置为圆角效果 */
  border-radius: 50%;
  /* 设置为距离div.analog-left元素的上边界有50%像素的距离 */
  top: 50%;
  /* 设置为距离div.analog-left元素的左边界有50%像素的距离 */
  left: 50%;
  /* X轴向左移动div.analog-left元素宽度的50%像素，Y轴向上移动div.analog-left元素高度的51%像素 */
  transform: translate(-50%, -51%);
}

/* 选中页面的<div class="direction-key">元素 */
div.direction-key {
  /* 设置为绝对定位 */
  position: absolute;
  /* 设置为距离div.analog-left元素的上边界有42%像素的距离 */
  top: 42%;
  /* 设置为距离div.analog-left元素的左边界有17%像素的距离 */
  left: 17%;
  /* 宽度设置为div.analog-left元素宽度的70%像素 */
  width: 70%;
  /* 高度设置为div.analog-left元素宽度的25%像素 */
  height: 25%;
  /* 背景颜色设置为白色（临时） */
  background-color: #fff;
}














